<!--个体工商表单-->
<template>
    <view class="form-box">
        <view class="login-box">
            <uni-forms class="formContainer" :modelValue="formData" ref="individual">
                <uni-forms-item ref="age" name="age">
                    <view class="form-item">
                        <view class="label-box">
                            <view class="label-left">
                                <text class="label-title" >申请人年龄</text>
                                <text style="color: #fa0000; margin-left: 10rpx">*</text>
                            </view>
                        </view>
                        <view class="item-input" style="margin-top: -8rpx !important ; ">
                            <uni-easyinput type="text" placeholder="请输入申请人年龄" maxlength="8"
                                v-model="formData.age"></uni-easyinput>
                        </view>
                    </view>
                </uni-forms-item>


                <uni-forms-item ref="garageStatus" name="garageStatus">
                    <view class="form-item">
                        <view class="label-box">
                            <view class="label-left">
                                <text class="label-title">有无车房</text>
                                <text style="color: #fa0000; margin-left: 10rpx">*</text>
                            </view>
                        </view>
                        <view class="item-input">
                            <view class="picker-text" >
                                <picker style="width: 100%;" @change="bindGarageListChange" :value="index" :range="garageList.map(v=>v.label)">
                                    <view class="row100">
                                        <view :style="{color: formData.garageStatus ? '#222': ''}"  >{{ formData.garageStatus ? garageList.find(v => {return v.value ===formData.garageStatus}).label : "请选择有无车房" }} </view>
                                        <image style="width: 8px; height: 26rpx;" :src="require('../static/fanhui.png')" mode="scaleToFill" />
                                    </view>
                                </picker>
                                
                                
                            </view>
                        </view>
                    </view>
                </uni-forms-item>




                <uni-forms-item ref="provinceName" name="provinceName">
                    <view class="form-item">
                        <view class="label-box">
                            <view class="label-left">
                                <text class="label-title">所属省份</text>
                                <text style="color: #fa0000; margin-left: 10rpx">*</text>
                            </view>
                        </view>
                        <view class="item-input">
                            <view class="picker-text">
                                <picker style="width: 100%;" @change="bindPriviceChange" :value="index" :range="provinceList.map(v=>v.label)">
                                   <view class="row100">
                                     <span :style="{color: formData.provinceName ? '#222': ''}">{{ formData.provinceName ? formData.provinceName : "请选择省份" }}</span>
                                     <image style="width: 8px; height: 26rpx;"  :src="require('../static/fanhui.png')" mode="scaleToFill" />
                                   </view>
                                </picker>
                                
                                
                            </view>
                        </view>
                    </view>
                </uni-forms-item>


                <uni-forms-item ref="creditCode" name="creditCode">
                    <view class="form-item">
                        <view class="label-box">
                            <view class="label-left">
                                <text class="label-title" >统一社会信用代码</text>
                                <text style="color: #fa0000; margin-left: 10rpx">*</text>
                            </view>
                        </view>
                        <view class="item-input">
                            <uni-easyinput type="text" placeholder="请输入统一社会信用代码"
                                v-model="formData.creditCode"></uni-easyinput>
                        </view>
                    </view>
                </uni-forms-item>


                <uni-forms-item ref="flowingWater" name="flowingWater">
                    <view class="form-item">
                        <view class="label-box">
                            <view class="label-left">
                                <text class="label-title">流水金额</text>
                                <text style="color: #fa0000; margin-left: 10rpx">*</text>
                            </view>
                        </view>
                        <view class="item-input">
                            <view class="picker-text">
                                 <picker style="width: 100%;" @change="bindflowingWaterListChange" :value="index" :range="flowingWaterList.map(v=>v.label)">
                                     <view class="row100">
                                        <span :style="{color: formData.flowingWater ? '#222': ''}" >{{ formData.flowingWater ? flowingWaterList.find(v => { return v.value === formData.flowingWater}).label : "请选择流水金额" }}</span>
                                         <image style="width: 8px; height: 26rpx;"  :src="require('../static/fanhui.png')" mode="scaleToFill" />
                                     </view>
                                 </picker>
                               
                                
                            </view>
                        </view>
                    </view>
                </uni-forms-item>

                <uni-forms-item ref="phone" name="phone">
                    <view class="form-item">
                        <view class="label-box">
                            <view class="label-left">
                                <text class="label-title" >手机号码</text>
                                <text style="color: #fa0000; margin-left: 10rpx">*</text>
                            </view>
                        </view>
                        <view class="item-input">
                            <uni-easyinput type="text" placeholder="请输入手机号码" maxlength="11"
                                v-model="formData.phone"></uni-easyinput>
                        </view>
                    </view>
                </uni-forms-item>


                <view class="form-item code" style="margin-bottom: 70rpx; margin-top: 50rpx">
                    <view class="label-box">
                        <view class="label-left">
                            <text class="label-title">验证码</text>
                            <text style="color: #fa0000; margin-left: 10rpx">*</text>
                        </view>
                        <view class="label-right">
                            <view :class="!btnDisabled ? 'get-code' : 'btnDisabledStyle'" @click="getCode('register')">
                                {{ btnName }}
                            </view>
                        </view>
                    </view>
                    <view class="item-input">
                        <uni-easyinput placeholder="请输入您的验证码" type="number" maxlength="6"
                            v-model="formData.authCode"></uni-easyinput>
                    </view>
                </view>



                <view style="margin:30rpx 0">
                    <button class="btnSubmit" type="primary" @click="onSubmit()">
                        开始匹配
                    </button>
                </view>
            </uni-forms>



            <view class="row" style="justify-content: flex-start">
                <checkbox-group @change="isChecked = !isChecked" style="width: auto">
                    <checkbox color="#f2891c" style="transform:scale(0.7);" :checked="isChecked" shape="circle">
                    </checkbox>
                </checkbox-group>
                <view style="font-size: 24rpx">我已阅读并同意 <text style="color: #2872FD;"
                        @click="toAgreement">《授权协议》</text></view>
            </view>


        </view>

        <uni-popup ref="popup" :maskClick="false" background-color="#fff">
            <view class="popup-content">
                <view style="width: 210rpx;height: 227rpx">
                    <image :src="require('../static/intellMate.png')" style="width: 100%;height: 100%"></image>
                </view>
                <view style="font-weight: bold;margin-top: 25rpx">产品匹配中...</view>
                <view style="color: #545454;margin-top: 40rpx">产品匹配中...{{ gotoMin }}秒自动跳转报告页面</view>
                <view style="color: #545454;">您可在我的页面-匹配报告中查询结果</view>
                <view class="row" @click="goto(`/pagesProduct/matchList/index`)" style="justify-content: center;margin-top: 20rpx">
                    <text style="color: #007AFF">进入匹配列表</text>
                    <view style="width: 16rpx;height: 20rpx;position:relative;">
                        <!-- <image src="@/pageProduct/static/arrowRight.png"
                            style="width: 100%;height: 100%;position:absolute;top: 0"></image> -->
                    </view>
                </view>
                <view @click="closeDialog" style="width: 36rpx;height: 36rpx;position:absolute;right: 26rpx;top: 20rpx">
                    <image :src="require('../static/close.png')" style="width: 100%;height: 100%"></image>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import {
    getArealist,
    getSmsCodeApi,
    getCmsMatchApi
} from "@/api/product";
import { searchDicListApi } from "@/api/public"
import { API_CHANNELTYPE } from "@/config/app";
export default {
    props: {
        current: {
            type: Number,
            default: 1
        },

    },
    data() {
        return {
            roleOptions: [],
            formData: {
                age: "",
                garageStatus: '',
                provinceName: '',
                creditCode: '',
                flowingWater: '',
                phone: '',
                authCode: ''
            },
            garageList: [], // 有无车房
            provinceList: [], // 省
            flowingWaterList: [], // 流水
            formRules: {
                creditCode: {
                    rules: [
                        {
                            required: true,
                            errorMessage: "请输入统一社会信用代码",
                        },
                    ],
                },
                age: {
                    rules: [
                        {
                            required: true,
                            errorMessage: "请输入年龄",
                        },
                    ],
                },
                garageStatus: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择有无车房',
                    }]
                },
                provinceName: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择经营者所在省份',
                    }]
                },
                flowingWater: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择流水金额',
                    }]

                },
                phone: {
                    rules: [{
                        required: true,
                        errorMessage: '请输入手机号码'
                    },
                    {
                        validateFunction: (rule, value, data, callback) => {
                            return new Promise((resolve, reject) => {
                                if (!value) {
                                    reject(new Error("手机号不能为空"))
                                    // return callback(new Error("手机号不能为空"));
                                } else {
                                    const reg = /^1[3-9][0-9]\d{8}$/;
                                    // 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
                                    if (reg.test(value)) {
                                        resolve();
                                        // callback()
                                    } else {
                                        // 具体错误信息没有提示
                                        reject(new Error("请输入正确的手机号"))
                                        // return callback(new Error("请输入正确的手机号"));
                                    }
                                }
                            })
                        },
                        errorMessage: '手机号码不正确',
                    }
                    ]
                },

            },
            countDown: 60,
            btnDisabled: false,
            isChecked: false,
            gotoMin: 5,
        }
    },
    computed: {
        //计算处理按钮名字
        btnName() {
            if (this.countDown == 0) {
                this.btnDisabled = false;
                return '重新发送';
            } else if (this.countDown > 0 && this.countDown < 60) {
                this.btnDisabled = true;
                return `${this.countDown}秒后重发`;
            } else if (this.countDown == 60) {
                this.btnDisabled = false;
                return `获取验证码`;
            }
        }
    },
    onReady() {
        this.$refs.individual.setRules(this.formRules)
    },
    mounted() {


    },
    onLoad(opt) {
        if (opt.code) {
            this.formData.creditCode = opt.code
        }
        if (opt.age) {
            this.formData.age = opt.age
        }
        this.initList()
    },
    methods: {
        bindGarageListChange(e) {
            this.formData.garageStatus = this.garageList[e.detail.value].value;
        },
        bindPriviceChange(e) {
            this.formData.provinceName = this.provinceList[e.detail.value].label
        },
        bindflowingWaterListChange(e) {
            this.formData.flowingWater = this.flowingWaterList[e.detail.value].value;
        },
        toAgreement() {
            uni.navigateTo({
                url: '/pages/privacy/authorizationAgreement'
            })
        },
        getCode() {
            this.$refs.individual.validate().then(async (validate) => {
                if (validate) {
                    getSmsCodeApi({
                        telephone: this.formData.phone
                    }).then(res => {
                        this.btnDisabled = true
                        this.$util.Tips(res.message)
                        let timer = setInterval(() => {
                            if (this.countDown > 0) {
                                this.countDown--;
                            } else {
                                clearInterval(timer);
                                this.btnDisabled = false;
                                this.countDown = 60;
                            }
                        }, 1000);

                    })
                }

            })
        },
        

        
        
       
    
        
        initList() {
            this.getProvinceList()
            this.getDictList()
        },
        getProvinceList() {
            getArealist({ id: 0 }).then(res => {
                this.provinceList = res.data.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
            })
        },
        getDictList() {
            let arr = ['garage_status', 'water_type']
            searchDicListApi(arr.join(',')).then(res => {
                this.garageList = res.data.garage_status.map(v => {
                    return {
                        label: v.dictLabel,
                        value: v.dictValue
                    }
                })
                this.flowingWaterList = res.data.water_type.map(v => {
                    return {
                        label: v.dictLabel,
                        value: v.dictValue
                    }
                })
            })
        },
        onSubmit() {
            this.$refs.individual.validate().then(async (validate) => {
                if (validate) {
                    if (!this.formData.authCode) return this.$util.Tips('请输入验证码')
                    if (!this.isChecked) return this.$util.Tips('请勾选同意《服务协议》')

                    let params = Object.assign({}, this.formData)
                    params.channelType= API_CHANNELTYPE.channelType
                    console.log("params", params)
                    getCmsMatchApi(params).then(res => {
                        if (res.data.matchStatus == 2) {
                            this.$refs.popup.open('center')
                            let timer = setInterval(() => {
                                if (this.gotoMin > 0) {
                                    this.gotoMin--;

                                } else {
                                    clearInterval(timer);
                                    this.$refs.popup.close()
                                    // uni.navigateTo({
                                    //     url: `/pageHome/individual/individualDetail?id=${res.data.id}&matchStatus=${res.data.matchStatus}`
                                    // });
                                    this.gotoMin = 60;
                                }
                            }, 1000);
                            return
                        } else if (res.code == 200) {
                            this.$refs.popup.open('center')
                            let timer = setInterval(() => {
                                if (this.gotoMin > 0) {
                                    this.gotoMin--;
                                } else {
                                    clearInterval(timer);
                                    this.gotoMin = 60;
                                }
                            }, 1000);
                            setTimeout(() => {
                                this.$refs.popup.close()

                                uni.redirectTo({
                                    // url: '/pageHome/enterpriseReports'
                                    url: `/pagesProduct/matchList/index`
                                })
                            }, 5000)
                        } else {
                            this.$refs.popup.close()
                            // this.$util.Tips("匹配失败！")
                            // uni.navigateTo({ url: `` })
                        }
                    })
                }


            })
        },
       
       
        async getPickerOptions() {
            let arr = ["person_stand"];
            let res = await searchDicListApi(arr.join(","));
            if (res && res.code == 200) {
                this.roleOptions = [res.data.person_stand];
            }
        },
        closeDialog() {
            this.$refs.popup.close()
        },
        goto(url) {
            uni.navigateTo({
                url: url
            })
        },

    }
}
</script>

<style lang="scss">
page {
    background-color: #fff !important;
}

/deep/ .is-input-border {
    border: none !important;
}

/deep/ .uni-easyinput__placeholder-class {
    font-weight: 400;
    font-size: 34rpx;
    color: #999999;
}

/deep/ .uni-easyinput__content-input {
    padding-left: 0 !important;
	height: auto !important;
}

/deep/ .uni-input-input {
    //color: #999999;
    font-size: 34rpx;
}
.row100 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.optionsBox {
    position: absolute;
    z-index: 10;
    top: 140rpx;
    left: 0rpx;
    padding: 30rpx 20rpx;
    width: 100%;
    border-radius: 10rpx;
    background-color: #ffffff;
    border: 1px solid #ebeef5;
    overflow-y: scroll;

    .option {
        line-height: 40rpx;
        margin-bottom: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:last-child {
            margin-bottom: 0rpx;
        }

        .delete {
            width: 30rpx;
            height: 30rpx;
        }
    }
}

.form-box {
    margin-top: 40rpx;
    padding: 30rpx;
}

.login-box {
    .form-item {
        .label-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .label-left {
                display: flex;
                align-items: center;

                .label-title {
                    font-weight: 600;
                    font-size: 30rpx;
                    color: #333333;
                }
            }

            .label-right {
                .get-code {
                    width: 180rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    text-align: center;
                    background: #2872fd;
                    border-radius: 6rpx;
                    font-weight: 600;
                    font-size: 30rpx;
                    color: #ffffff;
                }

                .btnDisabledStyle {
                    width: 180rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    font-size: 30rpx;
                    background: #cccccc;
                    cursor: not-allowed;
                    border: none;
                    color: white;
                    text-align: center;
                    border-radius: 6rpx;
                }
            }
        }

        .item-input {
            margin-top: 10rpx !important;
			padding-bottom:10rpx !important ;
            border-bottom: 1rpx solid #e6e6e6;
        }
    }

    .login-btn {
        margin-top: 80rpx;
    }

    .first-title {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #999999;
    }
}

.picker-text {
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    font-size: 34rpx;
    color: #999999;
    padding-bottom: 10rpx;
}

/deep/.is-input-error-border  {
    color: #222 !important;
}
/deep/ .uni-easyinput__placeholder-class {
    color: #999 !important;

}

.btnSubmit {
    color: #FFFFFF;
    font-weight: 500;
    background-color: #276ff7 !important;
}

.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    height: 500rpx;
    background-color: #fff;
    text-align: center;
    width: 590rpx;
    margin: 0 auto;
    border-radius: 12rpx;
    position: relative;
    z-index: 999;
}
/deep/ .uni-easyinput__placeholder-class {
	font-size: 34rpx !important;
}
</style>